import React, { useEffect, useLayoutEffect, useState } from "react";

/*
useLayoutEffect语法和作用几乎和useEffect相同

useLayoutEffect 与 useEffect的区别：
- `useEffect` 是异步执行的，而`useLayoutEffect`是同步执行的。
- `useEffect` 的执行时机是浏览器完成渲染之后，而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前

一般情况下，统一使用useEffect
只有在操作一些dom的相关的样式的时候，才考虑使用useLayoutEffect，避免页面的抖动
*/

const App = () => {
  const [count, setCount] = useState(100);

  // useLayoutEffect(() => {
  //   console.log("useLayoutEffect");
  // });

  // useEffect(() => {
  //   setCount(400);
  // }, []);

  useLayoutEffect(() => {
    setCount(400);
  }, []);

  return (
    <>
      <h2>useLayoutEffect</h2>
      {/* <p>count: {count}</p>
      <button onClick={() => setCount((v) => v + 1)}>btn</button> */}

      <div
        style={{ width: count + "px", height: 400, background: "red" }}
      ></div>
    </>
  );
};

export default App;
